<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>元素截图工具 - 设置</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div class="popup-container">
    <div class="header">
      <div class="icon">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9 2C8.45 2 8 2.45 8 3V4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4H16V3C16 2.45 15.55 2 15 2H9ZM12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7ZM12 9C10.34 9 9 10.34 9 12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12C15 10.34 13.66 9 12 9Z" fill="currentColor"/>
        </svg>
      </div>
      <div class="language-selector">
        <select id="languageSelect" class="language-select">
          <!-- 语言选项将由JavaScript动态生成 -->
        </select>
      </div>
    </div>
    
    <div class="content">
      <!-- 状态显示区域 -->
      <div class="status-section">
        <div class="status-card">
          <div class="status-icon">🎯</div>
          <div class="status-info">
            <h4 data-i18n="status.currentMode">当前默认模式</h4>
            <p class="current-mode" id="currentMode">SnapDOM</p>
          </div>
        </div>
      </div>

      <!-- 配置选项区域 -->
      <div class="config-section">
        <div class="section-header">
          <h3 data-i18n="ui.defaultCaptureMode">⚙️ 默认截图模式</h3>
          <p class="section-desc" data-i18n="ui.defaultCaptureModeDesc">选择点击插件图标时的默认截图方式</p>
        </div>
        
        <div class="mode-grid">
          <label class="mode-card" data-mode="snapdom">
            <input type="radio" name="defaultCaptureMode" value="snapdom" checked>
            <div class="mode-content">
              <div class="mode-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9V7L15 1H5C3.89 1 3 1.89 3 3V21C3 22.11 3.89 23 5 23H19C20.11 23 21 22.11 21 21V9M19 9H14V4H19V9Z" fill="currentColor"/>
                </svg>
              </div>
              <div class="mode-details">
                <h4 data-i18n="modes.snapdom">SnapDOM</h4>
                <p data-i18n="modes.snapdomDesc">高性能，支持SVG渲染</p>
                <span class="mode-badge recommended" data-i18n="modes.recommended">推荐</span>
              </div>
            </div>
          </label>

          <label class="mode-card" data-mode="html2canvas">
            <input type="radio" name="defaultCaptureMode" value="html2canvas">
            <div class="mode-content">
              <div class="mode-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19ZM17 12L14 9V11H10V13H14V15L17 12Z" fill="currentColor"/>
                </svg>
              </div>
              <div class="mode-details">
                <h4 data-i18n="modes.html2canvas">HTML2Canvas</h4>
                <p data-i18n="modes.html2canvasDesc">兼容性好，支持复杂样式</p>
              </div>
            </div>
          </label>

          <label class="mode-card" data-mode="native">
            <input type="radio" name="defaultCaptureMode" value="native">
            <div class="mode-content">
              <div class="mode-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z" fill="currentColor"/>
                </svg>
              </div>
              <div class="mode-details">
                <h4 data-i18n="modes.native">原生模式</h4>
                <p data-i18n="modes.nativeDesc">使用Chrome API，速度快</p>
              </div>
            </div>
          </label>
        </div>
      </div>
      
      <!-- 操作区域 -->
      <div class="action-section">
        <button id="startCapture" class="capture-btn">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 2L13.09 8.26L20 9L13.09 9.74L12 16L10.91 9.74L4 9L10.91 8.26L12 2Z" fill="currentColor"/>
          </svg>
          <span data-i18n="ui.startCapture">开始截图</span>
        </button>
        
        <div class="quick-tips">
          <div class="tip-item">
            <span class="tip-icon">💡</span>
            <span class="tip-text" data-i18n="tips.clickIcon">点击插件图标可直接开始截图</span>
          </div>
          <div class="tip-item">
            <span class="tip-icon">⚙️</span>
            <span class="tip-text" data-i18n="tips.rightClickMenu">右键菜单中也有"截图设置"选项</span>
          </div>
        </div>
      </div>
      
      <div class="instructions">
        <div class="instructions-header" id="instructionsToggle">
          <h3 data-i18n="instructions.title">使用说明</h3>
          <svg class="toggle-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7 10L12 15L17 10H7Z" fill="currentColor"/>
          </svg>
        </div>
        <div class="instructions-content" id="instructionsContent">
          <ol id="instructionSteps">
            <li>选择截图模式（原生/HTML2Canvas/SnapDOM）</li>
            <li>点击"开始截图"按钮</li>
            <li>将鼠标悬停在要截图的元素上</li>
            <li>点击选中的元素进行截图</li>
            <li>截图将自动保存到下载文件夹</li>
            <li>按ESC键可以取消选择</li>
          </ol>
          <div style="margin-top: 10px; font-size: 12px; color: #666;">
            <strong data-i18n="instructions.modeDescription">模式说明：</strong><br>
            <div id="modeDetails">
              • 原生模式：使用Chrome API，速度快<br>
              • HTML2Canvas：兼容性好，支持复杂样式<br>
              • SnapDOM：高性能，支持SVG渲染
            </div>
          </div>
        </div>
      </div>
      
    </div>
  </div>
  
  <script src="lang/index.js"></script>
  <script src="popup.js"></script>
</body>
</html>